<template>
  <div class="app-container" style="border: 1px solid gray;">
<!--  <div class="app-container" style="height: 2000px;border: 1px solid gray;">-->
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="设备编号" prop="">
        <el-input
          v-model="stnNoParam"
          placeholder="设备编号-不区分大小写"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查找设备</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">还原</el-button>
<!--        <el-button size="mini" @click="legendIsOpen">图例</el-button>-->
      </el-form-item>
    </el-form>

    <!-- 报警信息图标 -->
    <div ref="error" style="display:none;position: fixed;right:100px;z-index: 9;" >
      <img  src="./img/alarm.gif" @click="errorMsgIsOpen">
    </div>


    <!-- 图例按钮 -->
    <div  style="position: fixed;width:100px;z-index: 99;" align="center">
      <el-switch inactive-text="图例" v-model="legendSwith"></el-switch>
    </div>
    <!-- 图例 -->
    <div ref="legend" :style="{display:(legendOpen==true?'block':'none')}" style="margin-top: 30px;position: fixed;z-index: 99;">
      <!-- 双层嵌套循环，外层显示不同设备类型的设备名称，内层显示具体的图例 -->
      <div v-for="legendType in legendTypeList" style="border: 1px solid gray;margin-top: 10px;">
          <div style="width:100px;font-size: 20px;margin: 5px 0;display: inline-block;text-align:center;font-family:KaiTi; font-weight: bold;">{{ legendType }}</div>
          <div v-for="item in colorConifgList" style="">
            <div  :style="{display:(item.isShow=='true' && item.devName==legendType ?'table-cell':'none')}" style="width: 20px;vertical-align: middle;text-align:center;">
              <div :style="{background:item.rgbColor }" style=" width:18px;height: 18px;border-radius:50%;display: inline-block;"></div>
            </div>
            <div  :style="{display:(item.isShow=='true' && item.devName==legendType ?'table-cell':'none')}"
                  style="vertical-align: middle;text-align:center; height:30px;font-size: 18px;width: 80px;font-family:KaiTi; font-weight: bold;color:black;">{{item.description}}
            </div>
         </div>
      </div>
    </div>



    <!-- 画图界面代码在此开始 -->
<!--    <div id="devRoot" ref="dev" style="position:relative;" :style="{height:maxHeight}" @click="controlIsOpen($event)">-->
    <div id="devRoot" ref="dev" style="position:relative;margin: 10px auto 10px;" @click="controlIsOpen($event)" :style="{width:maxHeight,height:maxWidth}">
<!--      <div id = "devRoot2" style="position:absolute;width:80%;left: 50%; -ms-transform: translate(-500%);border: 1px solid gray;" :style="{height:maxHeight}">-->
        <axureTemp></axureTemp>
<!--      </div>-->
      <!-- 设备指示图标 -->
      <div ref="pointDev" style="display:none;position: absolute;z-index: 999;" :style="{top:pointDevTop,left:pointDevLeft}">
        <img  src="./img/showDev.png">
      </div>
    </div>
    <!-- 画图界面代码在此结束 -->



    <!-- 报警界面 -->
    <!-- 添加或修改颜色配置对话框 -->
    <el-dialog  :title="title" :visible.sync="plcErrorOpen" width="800px" append-to-body>
      <el-table
        :data="wcsErrorMsgList"
        style="width: 100%">
        <el-table-column
          type="index"
          :index="indexMethod">
        </el-table-column>

        <el-table-column
          prop="stnNo"
          label="设备编号"
          align="center"
          width="200">
        </el-table-column>

        <el-table-column
          prop="errorMsg"
          label="当前报警信息"
          align="center"
          width="600">
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closeError">关闭</el-button>
      </div>
    </el-dialog>

    <!-- 控制界面 -->
    <el-dialog  :title="controlTile" :visible.sync="contortOpen" width="800px" append-to-body>

        <el-radio-group v-model="controlRadio" style="margin-bottom: 20px;">
          <el-radio  label="1" border>启动</el-radio>
          <el-radio  label="2" border>停止</el-radio>
          <el-radio  label="3" border>复位</el-radio>
          <el-button type="primary" @click="controlSubmit"  round>执行</el-button>
          <el-button type="primary" @click="closeControl"  round>取消</el-button>
        </el-radio-group>

        <div style="border-radius: 4px;">
          <span>当前状态：{{curDevStateName}}</span>
          <el-divider direction="vertical"></el-divider>
          <span>当前报警：{{curPlcErr}}</span>

        </div>


      <el-collapse style="margin-top: 20px;">
        <el-collapse-item title="历史报警" name="1">
          <el-table  :data="PLC_ERR_LOGList" >
            <el-table-column type="index" :index="indexMethod"></el-table-column>
            <!--        <el-table-column label="id" align="center" prop="errId" width="50"/>-->
            <el-table-column label="设备编号" align="center" prop="stnNo" width="200"/>
            <el-table-column label="报警信息" align="center" prop="plcErr" :show-overflow-tooltip="true"/>
            <el-table-column label="报警时间" align="center" prop="createDate" width="180">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.createDate, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
              </template>
            </el-table-column>

          </el-table>
        </el-collapse-item>

      </el-collapse>




    </el-dialog>

  </div>
</template>

<script>
import { listWCS_STN,  addWCS_STN } from "@/api/wcs/WCS_STN";
import { listColor_conifg } from "@/api/wcs/color_conifg";
import axureComponent from './axure.vue'
import { listPLC_ERR_LOG, getPLC_ERR_LOG, delPLC_ERR_LOG, addPLC_ERR_LOG, updatePLC_ERR_LOG, exportPLC_ERR_LOG } from "@/api/wcs/PLC_ERR_LOG";

export default {
  name: "WCS_STN",
  components: {
    'axureTemp':axureComponent

  },
  data() {
    return {
      // 画图区高度和宽度
      maxHeight: '1570px',
      maxWidth: '5800px',
      //监控查询间隔ms
      intervalTime:8000,
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,

      // 设备监控表格数据
      wcsStnList: [],
      // 设备监控缓存数据
      wcsStnListCache: [],
      // 当前报警信息
      wcsErrorMsgList: [],
      // 当前报警信息缓存
      wcsErrorMsgListCache: [],

      // 记录画图时的信息
     arrList: [],

      // 历史报警表格数据
      PLC_ERR_LOGList: [],
      // 颜色配置表格数据
      colorConifgList: [],
      // 颜色配置类型数组
      legendTypeList: [],

      //图例开关
      legendSwith:false,


      // fixedWidth:'1654px',

      // 查询指示图标位置
      pointDevTop: '500px',
      pointDevLeft: '500px',

      // 报警信息界面
      title: "",
      // 控制界面
      controlTile: "",
      // 当前设备控制
      controlDev: "",


      // 是否显示弹出层
      open: true,
      // 是否弹出报警信息界面
      plcErrorOpen: false,
      // 是否弹出控制界面
      contortOpen: false,
      // 是否显示报警信息logo
      ErrorLogoIsOpen: false,
      // 是否显示图例
      legendOpen: false,

      // 页面查找设备缓存数组，用于清空缓存状态
      searchDevArr: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10000,//跟设备数量有关，一般不会超出10000节，如果超出记得修改
        stnNo: null,
        stnTp: null,
        type: null,
      },
      // 历史报警日志查询参数
      errLogQueryParams: {
        pageNum: 1,
        pageSize: 10,
        errId: null,
        stnNo: null,
        plcErr: null,
        createDate: null,
      },
      // 设备位置查找
      stnNoParam: null,

      // 表单参数
      form: {},
      // 分页
      activeName: 'second',
      // 表单校验
      rules: {
      },
      monitorRun:null,
      controlRadio:'1',
      curPlcErr:"",
      curDevStateName:"",
    };
  },
  //优先于mounted函数
  created() {
    this.getColorList();
    this.getList();//为了第一次加载时速度更快
    // this.getErrLogList();
  },

  methods: {
    /** 查询设备监控列表 */
    getList() {
      // console.log("开始获取stnList数据。。。")
      //情况报警信息表
      // this.WCSErrorMsgList=[]
      this.loading = true;
      listWCS_STN(this.queryParams).then(response => {
        this.wcsStnList = response.rows;
        this.total = response.total;
        this.loading = false;

        // this.checkDraw()

        this.refreshErrorMsgList();
        //该步要保证更新函数必须能拿到最新的list数据
        //并且为了由于代码中做了比较值变动的操作，该步在第一次加载所有颜色，必须保证在得到colorlist之后在做操作
        if(this.colorConifgList.length!=0){
          this.updateDevColor();
        }else{
          console.log("检查颜色配置表(wcs_monitor_state_color_conifg)是否为空")
          // alert("检查颜色配置表(wcs_monitor_state_color_conifg)是否为空")
          this.getColorList();
        }
      });
    },
    /** 查询历史报警列表 */
    getErrLogList(devNo) {
      // this.loading = true;
      // this.queryParams.params = {};
      // if (null != this.daterangeCreateDate && '' != this.daterangeCreateDate) {
      //   this.queryParams.params["beginCreateDate"] = this.daterangeCreateDate[0];
      //   this.queryParams.params["endCreateDate"] = this.daterangeCreateDate[1];
      // }
      this.errLogQueryParams.stnNo = devNo;
      listPLC_ERR_LOG(this.errLogQueryParams).then(response => {
        this.PLC_ERR_LOGList = response.rows;
        // console.log(this.PLC_ERR_LOGList)
        // this.total = response.total;
        // this.loading = false;

      });
    },

    /**
     * 刷新报警信息列表
     * 1、如果当前遍历报警设备有报警信息，且报警列表中没有，添加到报警信息列表中
     * 2、如果当前遍历报警设备有报警信息，且报警列表中也有，对比列表中的信息和最新的报警信息是否相同，如果相同不做处理，如果不同，更新报警信息
     * 3、如果当前遍历报警设备没有报警信息，且在报警列表中有，从报警信息列表中移除
     * */
    refreshErrorMsgList(){

      this.wcsStnList.forEach(stn=>{

        let errorMsgObj = {stnNo:"",errorMsg:""}  //要存到报警列表中的对象
        errorMsgObj.stnNo=stn.stnNo;
        errorMsgObj.errorMsg=stn.plcErr;
        //如果报警列表为空，将当前报警信息直接添加进去，该步为了避免报警列表为空时报错
        if(this.wcsErrorMsgList.length==0){
          if(errorMsgObj.errorMsg!="" && errorMsgObj.errorMsg!=null){
            this.wcsErrorMsgList.push(errorMsgObj);
          }

        }else{
          //报警列表查找函数，查找列表中是否有当前报警设备
          function findErrorMsg(paramMsg){
            return errorMsgObj.stnNo==paramMsg.stnNo;
          }
          let curMsg = this.wcsErrorMsgList.find(findErrorMsg);

          if(curMsg==null){ //如果报警列表中没有该设备，添加

            if(errorMsgObj.errorMsg!=""&& errorMsgObj.errorMsg!=null){
              this.wcsErrorMsgList.push(errorMsgObj);
              // console.log("添加到报警列表")
            }
          }else{//如果报警列表中已有该设备
            let index = this.wcsErrorMsgList.indexOf(curMsg);

            if(errorMsgObj.errorMsg==""){//如果该设备最新状态为无报警信息，移除
              this.wcsErrorMsgList = this.wcsErrorMsgList.filter(item => {
                return item.stnNo != errorMsgObj.stnNo;
              })

            }else if(errorMsgObj.errorMsg!=curMsg.errorMsg){//如果该设备最新状态为有报警信息，对比是否和报警列表中相同，不相同更新
              // console.log("修改该条报警信息")
              this.wcsErrorMsgList[index].errorMsg=errorMsgObj.errorMsg;
            }
          }
        }


      });
      if(this.wcsErrorMsgList.length==0){
        // console.log("图标logo隐藏")
        this.ErrorLogoIsOpen=false;
      }else{
        // console.log("图标logo显示")
        this.ErrorLogoIsOpen=true;
      }
      // console.log("报警信息："+this.wcsErrorMsgList.length);

    },
    /** 查询颜色配置列表 */
    //
    getColorList() {
      // console.log("开始查询colorList。。。")
      this.loading = true;
      listColor_conifg(this.queryParams).then(response => {
        // console.log("开始。。")
        // function sleep(d) {
        //   for(var t = Date.now(); Date.now() - t <= d;);
        // }
        // sleep(10000)
        // console.log("结束。。")
        this.colorConifgList = response.rows;
        // console.log(this.colorConifgList)
        this.total = response.total;
        this.loading = false;
        // console.log("开始查询colorList。。。，结束")
        //生成便于生成图例的list
        response.rows.forEach(item=>{
        if(this.legendTypeList.indexOf(item.devName)==-1 && item.isShow=="true"){
          this.legendTypeList.push(item.devName)
        }
        });
        // console.log("颜色类型："+this.legendTypeList)
      });
    },
    checkDraw(){
      for (let index = 0; index < this.$refs.dev.querySelectorAll("div[data-label]").length; index++) {
        let curDevDom = this.$refs.dev.querySelectorAll("div[data-label]")[index];    //当前对象
        //判断后端是否有这个设备编号的数据
        let label_value = curDevDom.getAttribute('data-label');
        let flag_si = false;
        for(let i=0;i<this.wcsStnList.length;i++){
          if(this.wcsStnList[i].stnNo==label_value){
            flag_si = true;
          }

          // console.log("list:"+this.wcsStnListCache[i].stnNo)
        }
        if (flag_si==false){
          this.arrList.push(label_value)
          // console.log("无数据："+label_value)
        }
      }
      console.log(this.arrList.length);
      console.log(this.arrList);
    },



    /** 渲染后修改样式
     * 1、替换图片路径
     * 2、添加title
     * 3、添加黑色边框
     * */
    firstByLoaded() {
      // console.log("渲染后修改样式。。。")
      //修改title属性
      for (let index = 0; index < this.$refs.dev.querySelectorAll("div[data-label]").length; index++) {
        let curDevDom = this.$refs.dev.querySelectorAll("div[data-label]")[index];    //当前对象
        curDevDom.title = curDevDom.getAttribute('data-label');
        // console.log("title"+curDevDom.title)
        curDevDom.querySelector(":first-child div").style.border = "1px solid black";
        // curDevDom.querySelector(":first-child div").style.borderRadius = "20%"

      }

      //修改图片路径
      for (let index = 0; index < this.$refs.dev.querySelectorAll("img").length; index++) {
        let imgDom = this.$refs.dev.querySelectorAll("img")[index];    //当前对象
        if(imgDom!=null){
          let imgSrc = imgDom.getAttribute('src')
          // console.log(imgSrc+"&&&&&&index")
          // console.log(imgSrc.indexOf("images/index"))
          //图片名称
          let imgName = imgSrc.slice(imgSrc.lastIndexOf("/")+1)
          if(imgSrc.indexOf("index")!=-1){
            //require函数不能包含路径;路径部分只作为常量引入
            imgDom.src=require('./axureStyle/images/index/'+imgName)
          }else if(imgSrc.indexOf("page")!=-1){
            console.log(imgSrc+"&&&&&&page")
          }



        }
      }
      // console.log("渲染后修改样式。。。，结束")
    },
    /** 查找颜色 */
    searchColor(stnObj) {
      // console.log()
      //颜色查找
      let color = ''
      this.colorConifgList.forEach(item=>{
        if(item.devType==stnObj.stnTp && item.devState==stnObj.stnSt){
          color = item.rgbColor
          // console.log(color)
        }
      })
      //js中return不会触发函数结束
      return color
    },

    /** 查找状态中文名 */
    searchStateName(stnObj) {
      // console.log()
      //颜色查找
      let name = ''
      this.colorConifgList.forEach(item=>{
        if(item.devType==stnObj.stnTp && item.devState==stnObj.stnSt){
          name = item.description
          console.log(name)
        }
      })
      //js中return不会触发函数结束
      return name
    },


    /** 将所有dev所在位置的元素保存到list中 */
    firstUpdateColor() {
      //统计一下，前端画图有设备编号，后端没数据的数量
      // let totalDataLabel = this.$refs.dev.querySelector("div[data-label]");
      // console.log(totalDataLabel[0])


      // this.getList();
      // console.log("list长度"+this.wcsStnList.length)
      for(let i=0;i<this.wcsStnList.length;i++){
        this.wcsStnListCache[i] = this.wcsStnList[i];
        // console.log("list:"+this.wcsStnListCache[i].stnNo)
      }

      //通过遍历wcs_stnList来将div/img添加到list
      // console.log("开始首次改变颜色")
      for (let index = 0; index < this.wcsStnListCache.length; index++) {
        let cacheStn = this.wcsStnListCache[index];//
        let totalDevDom=this.$refs.dev.querySelector("div[data-label='"+cacheStn.stnNo+"']");//设备编号对应的dom集合
        // let rgbColor = "rgb(0,0,0)";
        //首次通过状态改变颜色
        if (totalDevDom!=null){
          this.wcsStnListCache[index].divImg= totalDevDom.querySelector(":first-child");//实际会被改变的元素
          //将元素存到list中
          // console.log("updateColor"+this.wcsStnListCache[index].stnNo)
          this.stateUpdate(cacheStn)
        }
      }
      // console.log("开始首次改变颜色，结束")
    },

    /** 更新监控 */
    updateDevColor() {
      // console.log(this.WCS_STNList[3])
      if(this.wcsStnListCache.length==0){
        // console.log("首次将所有div拿到")
        this.firstUpdateColor();
        // console.log("首次将所有div拿到，结束")
      }else{
        // console.log("再次更新设备颜色")
        this.wcsStnList.forEach(newStn=>{
          for (let index = 0; index < this.wcsStnListCache.length; index++) {
            let  cacheStn = this.wcsStnListCache[index];//当前设备编号
            if(newStn.stnNo== cacheStn.stnNo && newStn.stnSt!= cacheStn.stnSt){
              //将新值更新
              this.wcsStnListCache[index].stnSt=newStn.stnSt;
              this.stateUpdate(cacheStn)
            }
          }
        })
        // console.log("再次更新设备颜色，结束")
      }
    },

    /** 状态变更 */
    stateUpdate(stnObj) {
      //处理急停
      if( stnObj.stnTp=='3'){
        //style="display: none; visibility: hidden">
        if( stnObj.stnSt=='0'){
          stnObj.divImg.style.display='none'
          stnObj.divImg.style.visibility='hidden'
        }else if ( stnObj.stnSt=='1'){
          stnObj.divImg.style.display='block'
          stnObj.divImg.style.visibility='visible'
        }
      }else{
        //颜色查询
        let rgbColor  = this.searchColor(stnObj)
        // console.log("颜色"+stnObj.stnNo+"----"+rgbColor)
        //颜色改变
        // let divImg = cacheStn.divImg
        if(stnObj.divImg!=null){ stnObj.divImg.style.backgroundColor=rgbColor;}
      }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      let stnNoVal = this.stnNoParam;
      if(stnNoVal != null && stnNoVal != ""){
        // console.log(stnNoVal);
        let isSearchDev = false;
        this.wcsStnListCache.forEach(stnObj =>{
          if(stnNoVal.toUpperCase()==stnObj.stnNo.toUpperCase() && stnObj.divImg != null){
            this.$refs.pointDev.style.display='inline-block'//显示指示图标
            stnObj.divImg.style.border='3px double red';//修改边框
            isSearchDev = true;//是否找到设备标识
            let curSearchDevDom = stnObj.divImg;
            var place =this.GetAbsoluteLocation(curSearchDevDom);

            //指示图标该去的位置
            let left = place.absoluteLeft+place.offsetWidth/2-this.$refs.pointDev.offsetWidth/2;
            let top = place.absoluteTop+place.offsetHeight;
            // console.log("高"+top)
            this.pointDevLeft=left+'px';
            this.pointDevTop=top+'px';


            //防止重新缓存元素
            if(this.searchDevArr.indexOf(stnObj.divImg)==-1){
              this.searchDevArr.push(stnObj.divImg)
            }

            // console.log("数组"+this.searchDevArr)
            this.$notify({
              // title: '设备查找结果',
              // message: h('i', { style: 'color: teal'}, '已找到'+stnNoVal+'设备已显示为红色')
              title: '查找结果--成功',
              message: '找到'+stnNoVal+'设备,已指示位置。',
              type: 'success',
              duration: 3000
            });

          }
        });
        if(isSearchDev == false){
          this.$notify({
            // title: '设备查找结果',
            // message: h('i', { style: 'color: teal'}, '已找到'+stnNoVal+'设备已显示为红色')
            title: '查找结果--无',
            message: '未找到'+stnNoVal+'，检查输入是否正确！！！',
            type: 'warning',
            duration: 3000
          });
        }
      }
    },
    /**
     * 查找该元素再画图时的绝对定位位置及宽高
     * @param element
     * @returns {{absoluteTop: (*|number|number), offsetHeight: (*|number), offsetWidth: (*|number), absoluteLeft: (*|number|number)}|null}
     * @constructor
     */
     GetAbsoluteLocation(element)
    {
      if ( arguments.length != 1 || element == null )
      {
        return null;
      }
      var offsetTop = element.offsetTop;
      var offsetLeft = element.offsetLeft;
      var offsetWidth = element.offsetWidth;
      var offsetHeight = element.offsetHeight;
      while(element.getAttribute("id") != "devRoot" )
      {
        offsetTop += element.offsetTop;
        offsetLeft += element.offsetLeft;
        element = element.offsetParent
      }
      return { absoluteTop: offsetTop, absoluteLeft: offsetLeft,
        offsetWidth: offsetWidth, offsetHeight: offsetHeight };
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.stnNoParam=null;
      this.$refs.pointDev.style.display='none'//隐藏指示图标

      while(this.searchDevArr.length>0){
        let curDevNo = this.searchDevArr[0]
        curDevNo.style.border="1px solid black";//将边框还原
        this.searchDevArr = this.searchDevArr.filter(item => {
          return item != curDevNo;
        })
      }



    },

    /** 报警信息关闭操作 */
    closeError() {
      this.plcErrorOpen=false;
    },



    /** 报警信息界面显示 */
    errorMsgIsOpen() {
      // console.log(this.$refs.error.style.display)
      this.title = '报警信息'
      this.plcErrorOpen = true;
    },
    /** 控制界面显示 */
    controlIsOpen(event) {
      // console.log(this.$refs.error.style.display)

      //得到该设备设备编号
      this.controlDev = event.target.parentNode.getAttribute('data-label')
      console.log(this.controlDev)
      if(this.controlDev==null){return;}
      let controlStnObj = null;
      this.wcsStnListCache.forEach(stnObj => {

        if(stnObj.stnNo == this.controlDev){
          // console.log(stnObj.stnNo)
          // console.log(stnObj.controlName)
          controlStnObj = stnObj;
        }

      })
      // console.log(controlStnObj)
      // console.log(controlStnObj.plcErr)
      //当前状态
      this.curDevStateName = this.searchStateName(controlStnObj);
      //当前报警信息
      if(controlStnObj.plcErr=='' || controlStnObj.plcErr ==null){
        this.curPlcErr = '无';
      }else{
        this.curPlcErr = controlStnObj.plcErr;
      }

      this.controlTile = controlStnObj.stnNo + "详情界面——"+controlStnObj.controlName;

      //获取该设备下的前10条历史报警
      this.errLogQueryParams.stnNo = '';
      this.PLC_ERR_LOGList = [];
      this.getErrLogList(this.controlDev);
      this.contortOpen = true;
      // console.log('1111')
      // console.log(this.contortOpen)

      // console.log(event.target.getAttribute('id'));
      // console.log(event.target.parentNode.getAttribute('id'));
      // console.log(event.target.parentNode.getAttribute('data-label'));
      // console.log(this.controlDev)
      // // console.log( event.target.getBoundingClientRect().right);
      // console.log( event.target.getBoundingClientRect().left);
      // console.log( event.target.getBoundingClientRect().right);
      // console.log( event.target.getBoundingClientRect().bottom);
      // console.log( event.target.offsetWidth);
      // console.log( event.target.getBoundingClientRect().bottom);
      // document.body.scrollTop = document.documentElement.scrollTop = 0;
    },
    /** 控制执行操作 */
    controlSubmit() {
      // this.contortOpen=false;
      // console.log(this.controlRadio)
      this.queryParams.params = {};
      this.queryParams.params["dev_no"] = this.controlDev;
      this.queryParams.params["type"] = this.controlRadio;
      addWCS_STN(this.queryParams).then(response => {
        this.msgSuccess("发送完成");
        // this.contortOpen=false;
        // this.getList();
      });
    },
    /** 控制界面关闭操作 */
    closeControl() {
      this.contortOpen=false;
      this.controlDev = ''
    },
    /** 读取元素最大高/宽度 */
    searchMaxXY(){
      let maxX = 0;
      let minX = 5000;
      let maxY = 0;
      let mixdevId = "";
      let maxdevId = "";
      // console.log("dev宽："+this.$refs.dev.offsetWidth);
      // console.log(this.$refs.dev.querySelectorAll("div div").length)
      let baseDom = document.getElementById("base");
      console.log(baseDom.offsetWidth)
      console.log(baseDom.offsetHeight)
      document.getElementById("base").getElementsByTagName("div").forEach(elem=>{
      // this.$refs.dev.querySelectorAll("[id=base]").forEach(elem=>{
      //   console.log(elem)
        if(elem.style.display!="none" && elem.parentNode.getAttribute('id')=="base"){
          let leftx = elem.getBoundingClientRect().left;//最大宽度
          let rightx = elem.getBoundingClientRect().right;//最大宽度
          let y = elem.getBoundingClientRect().bottom;//最大高度
          if(rightx>maxX){
            maxX = rightx;
            maxdevId= elem;
          }
          if(leftx<minX){
            minX = leftx;
            // devId = elem.getAttribute('id');
            mixdevId = elem
          }
          if(y > maxY){
            maxY = y;
          }
          if(leftx==0){
            console.log(elem.getAttribute('id'))
          }
          // if()
          // console.log("x"+x)
          // console.log("y"+y)
        }

      });
      this.maxHeight = maxY + 'px';
      // this.maxWidth = maxX + 'px';
      let floadWidth = maxX-minX;
      this.fixedWidth = floadWidth + 'px';
      // this.fixedWidth = 1670 + 'px';
      console.log("maxX"+maxX)
      console.log("minX"+minX)
      console.log("floadWidth"+floadWidth)
      // console.log(this.maxWidth)
      console.log(mixdevId)
      console.log(maxdevId)
      //ceshi
    },
    /** 报警信息序号 */
    indexMethod(index) {
      return index + 1;
    },
  },
  mounted(){//页面加载完成时执行

    //查找画图界面的最大高度
    // this.searchMaxXY();
    //渲染后替换一些样式
    this.firstByLoaded();

    //循环
    // setTimeout(()=>{
    //   // console.log("Live to die")
    //   this.getList();
    // }, 0)
    this.monitorRun=window.setInterval(() =>{
      setTimeout(()=>{
        console.log("Live to die")
        this.getList();
      }, 0)

    },this.intervalTime);


    //等待dom渲染完毕再加载
    // this.$nextTick(()=>{
    //     //监听缩放
    //     window.addEventListener("resize", ()=> {
    //       // console.log("关闭监控")
    //       // this.searchMaxXY();
    //     })
    //     //监听页面加载
    //     window.addEventListener('load',()=>{
    //       // console.log("关闭监控2")
    //       // this.searchMaxXY();
    //     })
    //   // }
    // });
  },
  //tab退出时关闭定时调用
  beforeDestroy(){
    console.log("关闭监控")
    window.clearInterval(this.monitorRun);
  },
  watch:{//监控数据变动
    legendSwith:function(val){
      if(this.legendSwith==true){
        this.$refs.legend.style.display="inline-block"
      }else{
        this.$refs.legend.style.display="none"
      }
    },
    ErrorLogoIsOpen:function(){
      if(this.ErrorLogoIsOpen==true){
        this.$refs.error.style.display="inline-block"
      }else{
        this.$refs.error.style.display="none"
      }
    },


  },
};
</script>


